<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<!--导入Google Maps API库文件。注意将本代码中的API Key替换为前文申请到的API Key-->
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA1j86tnUDFv8OAtC8dZVtKRT8YXSkg32FmSueYimfV_yj5DJguRRW5eQHwEBk10jwkDxLKNltT_kuQA" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
    GMarker.prototype.setIndex = function(index)
         {
            this.index = index;
         }
    
    
    var map;
    
    var polyline;
    
    var markers = [];
    //通过复制产生
    var myIcon= new GIcon(G_DEFAULT_ICON, "http://www.google.com/mapfiles/marker.png");
    
    //创建地标
    function createMarker(point)
    {
      var marker = new GMarker(point, {icon: myIcon, draggable: true, bouncy: true});
      var index = markers.length;
      
      //双击地标删除该地标
      GEvent.addListener(marker, 'dblclick', function()
                          {
                            deleteMarker(marker);
                          });
      
      //dragstart事件，换新图标
      GEvent.addListener(marker, 'dragstart', function()
                          {
                            marker.setImage("http://www.google.com/mapfiles/dd-start.png");
                          });
      //dragend事件，换回原图标
      GEvent.addListener(marker, 'dragend', function()
                          {
                            marker.setImage("http://www.google.com/mapfiles/marker.png");
                          });
      
      //单击显示形成安排
      GEvent.addListener(marker, 'click', function()
                          {
                            marker.openInfoWindowHtml("干些什么呢？");
                          });
                          

      //drag事件
      //注意，如果添加了polyline，则拖动地标时需要重画路线
      GEvent.addListener(marker, 'drag', function()
                          {
                            redrawPolyline();
                          });
      
      marker.setIndex(index);
      markers[index] = marker;
      map.addOverlay(marker);
      
      //每创建一个新的地标就重画一次
      redrawPolyline();
    }
    
    //双击地标删除该地标
    function deleteMarker(marker)
    {
      //确定是否真的删除
      if(!confirm("确定删除该地标吗？")) return;
      
      var index = marker.index;
      
      //移除该图层
      map.removeOverlay(marker);
      
      //从数组中删除指定GMarker并更新index
      for(var i = index; i<markers.length-1; i++)
      {
          markers[i+1].setIndex(i);
          markers[i] = markers[i+1];
      }
      markers.length = markers.length-1;
    }
    
    function load()
    {
      if (GBrowserIsCompatible())
      {  
        map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        
        var centerPoint= new GLatLng(39.92, 116.46);
        
        map.setCenter(centerPoint, 4);
        
        GEvent.addListener(map, 'click', function(overlay,  point)
                         {
                           if(point) createMarker(point);
                         });
      }
    }
    
    //添加行程路线
    function addPolyline()
    {
      //创建
      var points = [];
      for(var i=0; i<markers.length; i++)
      {
        points[i] = markers[i].getPoint();
      }
      
      polyline = new GPolyline(
        points, //GLatLng()数组 
        "#FF0000", //折线颜色
        10, //折线宽度
        0.5 //透明度
        ); 
      map.addOverlay(polyline);
    }
    
    //删除行程路线
    function removePolyline()
    {
      polyline.remove();
      polyline = null;
    }
    
    //重画行程路线
    function redrawPolyline()
    {
      if(polyline)
      {
        removePolyline();
      }
      addPolyline();
    }

//]]>
    </script>
  </head>
  <!--加载时调用load()函数加载地图，注意加上onunload="GUnload()"防止内存泄露-->
  <body onload="load()" onunload="GUnload()">
    <!--以下id为map的DIV元素即为Google地图的容器-->
    <div id="map" style="width: 600px; height: 500px"></div>
  </body>
</html>
